Skip to content

Commit

Permalink
chore(readme): v2 cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@ariellalgilmore
ariellalgilmore committed Nov 2, 2023
1 parent 9c97fcf commit 21f4b63
Show file tree
Hide file tree
Showing 8 changed files with 114 additions and 124 deletions.
52 changes: 21 additions & 31 deletions packages/web-components/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@ yarn add @carbon/ibmdotcom-web-components
> ```
`@carbon/ibmdotcom-web-components` uses
[`lit-html`](https://lit-html.polymer-project.org) for reactive templating on
top of raw Web Components standard and
[`lit-element`](https://lit-element.polymer-project.org) for reactive
properties/attributes on top of `lit-html`.
[`lit`](https://lit-html.polymer-project.org) for reactive templating on top of
raw Web Components standard and
[`lit/decorators`](https://lit-element.polymer-project.org) for reactive
properties/attributes on top of `lit`.
## Usage Examples
Expand All @@ -96,7 +96,7 @@ import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-contain
Once you do that, you can use our components as easy as using HTML tags, like:
```html
<cds-masthead-container></cds-masthead-container>
<c4d-masthead-container></c4d-masthead-container>
```
> 💡 Check our
Expand Down Expand Up @@ -181,7 +181,7 @@ To prevent a flash of unstyled content (FOUC) from happening on your page be
sure to to `display: none` if a component has not been defined yet. For example
```css
cds-button-group:not(:defined) {
c4d-button-group:not(:defined) {
display: none;
}
```
Expand Down Expand Up @@ -224,7 +224,7 @@ Here is an example of implementing the `dotcom-shell`:
<html>
<head>
<script type="module">
import 'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/dotcom-shell.min.js';
import 'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/dotcom-shell.min.js';
// The minimum prerequisite to use our service for translation data, etc.
window.digitalData = {
Expand Down Expand Up @@ -252,7 +252,7 @@ Here is an example of implementing the `dotcom-shell`:
...
</head>
<body>
<cds-dotcom-shell-container></cds-dotcom-shell-container>
<c4d-dotcom-shell-container></c4d-dotcom-shell-container>
</body>
</html>
```
Expand All @@ -271,7 +271,7 @@ page:
<head>
<link
rel="stylesheet"
href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/plex.css" />
...
</head>
</html>
Expand Down Expand Up @@ -315,12 +315,12 @@ A tag release would be called as:
<!-- LATEST -->
<script
type="module"
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/dotcom-shell.min.js"></script>
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/dotcom-shell.min.js"></script>

<!-- NEXT -->
<script
type="module"
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/dotcom-shell.min.js"></script>
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/next/dotcom-shell.min.js"></script>
```

A specific release would be called as:
Expand All @@ -329,7 +329,7 @@ A specific release would be called as:
<!-- SPECIFIC VERSION (available starting v1.6.0) -->
<script
type="module"
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v1.x.y/dotcom-shell.min.js"></script>
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v2.x.y/dotcom-shell.min.js"></script>
```

> NOTE: The latest/next tags are moving versions. While beneficial to always
Expand Down Expand Up @@ -374,7 +374,7 @@ IBM.com Northstar footer:
<body id="ibm-com" class="ibm-type">
<div id="ibm-top" class="ibm-landing-page">
<!-- Uses Carbon for IBM.com Web Components masthead -->
<cds-masthead-container></cds-masthead-container>
<c4d-masthead-container></c4d-masthead-container>
<div id="ibm-content-wrapper">...</div>
<!-- Uses legacy IBM.com Design System (Northstar) footer -->
<footer role="contentinfo" aria-label="IBM"></footer>
Expand Down Expand Up @@ -437,7 +437,7 @@ You can create a derived class of our component and override
like:

```javascript
import { css, customElement } from 'lit-element';
import { css, customElement } from 'lit';
import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components/link-with-icon/link-with-icon';

@customElement('my-link-with-icon')
Expand All @@ -460,29 +460,19 @@ scheme of `@carbon/ibmdotcom-web-components` components:
For example, if you add CSS like below:

```css
cds-link-with-icon {
--cds-link-01: #3d70b2; /* `$link-01` token for `g100` theme */
c4d-link-with-icon {
--c4d-link-01: #3d70b2; /* `$link-01` token for `g100` theme */
}
```

The color of the link in the code below changes to the one in the `g100` theme:

```html
<cds-link-with-icon href="https://www.ibm.com/standards/carbon">
<c4d-link-with-icon
href="https://www.ibm.com/standards/carbon"
cta-type="local">
Link text
<svg
slot="icon"
focusable="false"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20">
<path
d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
</svg>
</cds-link-with-icon>
</c4d-link-with-icon>
```

The names of CSS Custom Properties you can use are the Carbon theme tokens
Expand All @@ -495,7 +485,7 @@ specific element by:
```scss
@use '@carbon/styles/scss/themes' as *;

cds-link-with-icon {
c4d-link-with-icon {
// Emits all theme tokens in CSS Custom Properties
@include theme(g100, true);
}
Expand Down
4 changes: 4 additions & 0 deletions packages/web-components/docs/breaking-changes.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Breaking changes

## v2.0.0

The breaking changes and migration documentation can be found [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/feat/carbon-for-ibm-dotcom-v2/docs/dotcom-v2-migration.md).

## v1.13.0

### Dependency updates
Expand Down
63 changes: 29 additions & 34 deletions packages/web-components/docs/carbon-cdn-style-helpers.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,13 +250,13 @@ The following includes Carbon grid and all corresponding grid classes.

```html
// SPECIFIC VERSION
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/[v1.x.y]/grid.css" />
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/version/[v2.x.y]/grid.css" />

// LATEST tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />

// NEXT tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/grid.css" />
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/grid.css" />
```

[Learn more about the Carbon 2x Grid](https://carbondesignsystem.com/guidelines/2x-grid/overview)
Expand All @@ -269,13 +269,13 @@ in Carbon.

```html
// SPECIFIC VERSION
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/[v1.x.y]/themes.css" />
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/version/[v2.x.y]/themes.css" />

// LATEST tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/themes.css" />
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />

// NEXT tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/themes.css" />
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/themes.css" />
```

### Available classes
Expand All @@ -292,40 +292,35 @@ in Carbon.
```html
<html>
<head>
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/themes.css" />
<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/dotcom-shell.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leadspace.min.js"></script>
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/dotcom-shell.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/leadspace.min.js"></script>
...
</head>
<body>
<cds-dotcom-shell-container>
<c4d-dotcom-shell-container>
<main>
<cds-leadspace size="medium" class="cds-theme-zone-g90">
<cds-leadspace-heading>LeadSpace title</cds-leadspace-heading>
<c4d-leadspace size="medium" class="cds-theme-zone-g90">
<c4d-leadspace-heading>LeadSpace title</c4d-leadspace-heading>
LeadSpace copy
<cds-button-group slot="action">
<cds-button-group-item href="www.example.com">
<c4d-button-group slot="action">
<c4d-button-group-item href="www.example.com" cta-type="local">
Button 1
<svg
focusable="false"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
slot="icon"
>
<path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
</svg>
</cds-button-group-item>
</cds-button-group>
<cds-leadspace-image slot="image" class="bx--image" alt="alt text" default-src="https://picsum.photos/id/1076/1056/480">
<cds-image-item media="(min-width: 672px)" srcset="https://picsum.photos/id/1076/672/400"></cds-image-item>
<cds-image-item media="(min-width: 0)" srcset="https://picsum.photos/id/1076/320/370"></cds-image-item>
</cds-leadspace-image>
</cds-leadspace>
</c4d-button-group-item>
</c4d-button-group>
<c4d-background-media
slot="image"
opacity="100"
alt="alt text"
default-src="https://picsum.photos/id/1076/1056/480">
<c4d-image-item
media="(min-width: 672px)"
srcset="https://picsum.photos/id/1076/672/400"></c4d-image-item>
<c4d-image-item
media="(min-width: 0)"
srcset="https://picsum.photos/id/1076/320/370"></c4d-image-item>
</c4d-background-media>
</c4d-leadspace>
</main>
</cds-dotcom-shell-container>
</body>
Expand Down
Loading

0 comments on commit 21f4b63

Please sign in to comment.