diff --git a/src/components/TypesetStyle/TypesetExample.js b/src/components/TypesetStyle/TypesetExample.js index 86da4e51e2a..0a75615d437 100644 --- a/src/components/TypesetStyle/TypesetExample.js +++ b/src/components/TypesetStyle/TypesetExample.js @@ -105,7 +105,7 @@ const TypesetExample = (props) => ( // eslint-disable-next-line no-useless-concat lineHeight: `${`${calculateFluidLineHeight('line-height')}px / `}${ currentBreakpointSpecs['line-height'] - }em`, + }rem`, letterSpacing: currentBreakpointSpecs['letter-spacing'] .toString() .replace('0.', '.'), diff --git a/src/components/TypesetStyle/typeset-example.scss b/src/components/TypesetStyle/typeset-example.scss index 00591f03549..646f9453c52 100644 --- a/src/components/TypesetStyle/typeset-example.scss +++ b/src/components/TypesetStyle/typeset-example.scss @@ -52,7 +52,7 @@ .cds--typeset-example-specs { padding: $spacing-05 $spacing-06; - + @include breakpoint('md') { width: 33.3%; border-left: 1px solid $gray-20; diff --git a/src/pages/all-about-carbon/images/team/johlic_marc.png b/src/pages/all-about-carbon/images/team/johlic_marc.png new file mode 100644 index 00000000000..694a4039f61 Binary files /dev/null and b/src/pages/all-about-carbon/images/team/johlic_marc.png differ diff --git a/src/pages/all-about-carbon/partners.mdx b/src/pages/all-about-carbon/partners.mdx index 8a2a7aa3fb9..d4d383675da 100644 --- a/src/pages/all-about-carbon/partners.mdx +++ b/src/pages/all-about-carbon/partners.mdx @@ -74,31 +74,7 @@ increases the internal and external eminence of Carbon Design System and IBM. -

- The people - - - -

+### The people @@ -254,14 +230,14 @@ allocation to support Carbon's work. ![Haidy Francis headshot](/images/team/francis_haidy.png) - + -![Craig Moser headshot](/images/team/moser_craig.png) +![Marc Johlic headshot](/images/team/johlic_marc.png) - + -![Doug Powell headshot](/images/team/powell_doug.png) +![Craig Moser headshot](/images/team/moser_craig.png) diff --git a/src/pages/all-about-carbon/the-team.mdx b/src/pages/all-about-carbon/the-team.mdx index 947851e8e9e..198015b6ab9 100644 --- a/src/pages/all-about-carbon/the-team.mdx +++ b/src/pages/all-about-carbon/the-team.mdx @@ -111,11 +111,6 @@ design and build with them. ![Tracey King headshot](/images/team/king_tracey.png) - - - -![Vince Picone headshot](/images/team/picone_vince.png) - diff --git a/src/pages/designing/design-resources/images/invision.png b/src/pages/designing/design-resources/images/invision.png new file mode 100644 index 00000000000..12f1becffb7 Binary files /dev/null and b/src/pages/designing/design-resources/images/invision.png differ diff --git a/src/pages/designing/design-resources/index.mdx b/src/pages/designing/design-resources/index.mdx index f998ee44e5c..9f446daf391 100755 --- a/src/pages/designing/design-resources/index.mdx +++ b/src/pages/designing/design-resources/index.mdx @@ -283,20 +283,37 @@ handoff assets to make sure your designs are accessible for implementation. ## Prototyping tools +### Carbon Mid-Fi Sketch kit + +This kit provides designers with a way to visualize concepts and test them out +before committing to high-fidelity designs. + + + + + + + + + ### Invision Freehand kit A Carbon wireframe kit for Invision Freehand is available for teams to create low fidelity wireframes. This kit is maintained by the Cloud PAL community. -#### How to access the kit: - -1. Log into [Invision Freehand](https://ibm.invisionapp.com/freehand/) and - create a new freehand. -2. Next, select `Wireframes and flowcharts` from the template window. -3. Select `Wireframe - carbon components` by Kamil Zal. + + + -For more instructions go to -[IBM Cloud PAL](https://pages.github.ibm.com/ibmcloud/pal/resources/resources/#invision-freehand-kit) -_IBMers only_. +![Invision icon](/images/invision.png) -
+ + + diff --git a/src/pages/designing/kits/figma.mdx b/src/pages/designing/kits/figma.mdx index 80cfe512f32..28ac7a40131 100644 --- a/src/pages/designing/kits/figma.mdx +++ b/src/pages/designing/kits/figma.mdx @@ -15,22 +15,22 @@ contains all resources you need to get started. -**Beta release:** Only the White theme is available in Beta. The other three -themes will be available by the end of year. The beta is also only available to -IBMers at the moment however we are hoping to publish it the the Figma community -in early 2022 for external use. +**Available to IBM only:** the Figma kit is currently only available to IBMers +through a private Figma organization. We are working on getting the kit added to +the Figma open community and expect it to be published at the end of Q1 for +external use. -Get the library +Get the libraries Start designing Feedback -## Get the library +## Get the libraries #### 1. Sign into Figma using IBM SSO @@ -40,6 +40,10 @@ libraries. #### 2. Turn on the theme libraries +There are four Carbon themes, two light (White and Gray 10) and two dark (Gray +90 and Gray 100). Each theme lives in its own Figma library. You can turn on as +many libraries as you’d like. + Inside of a design file, navigate to the **Main menu** panel in the top left of the toolbar (A). Open the menu and select **Libraries** from the list (B). @@ -52,8 +56,8 @@ the toolbar (A). Open the menu and select **Libraries** from the list (B). Then in the Libraries modal that appears, find the team called -`[NEW] IBM Design Systems` (C) and switch the toggle beside -`White theme - Carbon Design System` to on (D). +`[NEW] IBM Design Systems` (C) and switch the toggle beside a themed library, +for example the `White theme - Carbon Design System` to on (D). @@ -63,8 +67,59 @@ Then in the Libraries modal that appears, find the team called -To preview the library, visit this -[view-only link](https://www.figma.com/file/Vzz8k68Pqk5HfaTdQOQrGu/White-Theme---Carbon-Design-System?node-id=456%3A14680). +
+
+ +To preview the four Carbon themes, visit these view-only links. + + + + fathom.trackGoal('P0OEN9TS', 0)} + subTitle="White theme" + href="https://www.figma.com/file/Vzz8k68Pqk5HfaTdQOQrGu/White-Theme---Carbon-Design-System" + actionIcon="launch"> + +![Figma icon](/images/figma.svg) + + + + + fathom.trackGoal('T7D1HJ3L', 0)} + subTitle="Gray 10 theme" + href="https://www.figma.com/file/i6y80WeotmhmbWxpmcffz7/Gray-10-Theme---Carbon-Design-System" + actionIcon="launch"> + +![Figma icon](/images/figma.svg) + + + + + fathom.trackGoal('LYFJTPDE', 0)} + subTitle="Gray 90 theme" + href="https://www.figma.com/file/fCucrHE8tdGDVJX7ODqajd/Gray-90-Theme---Carbon-Design-System" + actionIcon="launch"> + +![Figma icon](/images/figma.svg) + + + + + fathom.trackGoal('3XH0SIBJ', 0)} + subTitle="Gray 100 theme" + href="https://www.figma.com/file/TckQzGe3bNxHPLoRhbXFal/Gray-100-Theme---Carbon-Design-System" + actionIcon="launch"> + +![Figma icon](/images/figma.svg) + + + + + +
#### 3. Turn on the other IBM Design Language libraries  @@ -72,8 +127,9 @@ Under the same team `[NEW] IBM Design Systems` you can also turn on the following libraries: - Color styles - IBM Design Language -- Icons and Pictograms - IBM Design Language - Text styles - IBM Design Language +- Icons - IBM Design Language +- Pictograms - IBM Design Language ## Start designing diff --git a/src/pages/designing/kits/images/figma.svg b/src/pages/designing/kits/images/figma.svg new file mode 100644 index 00000000000..cd639dd824f --- /dev/null +++ b/src/pages/designing/kits/images/figma.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + diff --git a/src/pages/designing/kits/images/kit-figma-2.png b/src/pages/designing/kits/images/kit-figma-2.png index 51f94b83622..17e26d7ae20 100644 Binary files a/src/pages/designing/kits/images/kit-figma-2.png and b/src/pages/designing/kits/images/kit-figma-2.png differ diff --git a/src/pages/developing/react-tutorial/step-1.mdx b/src/pages/developing/react-tutorial/step-1.mdx index 9f3b9e1a3fc..45ca8fb75fe 100644 --- a/src/pages/developing/react-tutorial/step-1.mdx +++ b/src/pages/developing/react-tutorial/step-1.mdx @@ -70,13 +70,15 @@ cd carbon-tutorial ### Add upstream remote Add a remote called `upstream` so we can eventually submit a pull request once -you have completed this tutorial step. +you have completed this tutorial step. There are two choices: SSH or HTTPS + +#### SSH ```bash git remote add upstream git@github.com:carbon-design-system/carbon-tutorial.git ``` -Or, if you prefer to use HTTPS instead of SSH with your remotes: +#### HTTPS ```bash git remote add upstream https://github.com/carbon-design-system/carbon-tutorial.git diff --git a/src/pages/developing/react-tutorial/step-2.mdx b/src/pages/developing/react-tutorial/step-2.mdx index 95f81d40d89..ed55c304cb3 100644 --- a/src/pages/developing/react-tutorial/step-2.mdx +++ b/src/pages/developing/react-tutorial/step-2.mdx @@ -254,8 +254,8 @@ import { Breadcrumb, BreadcrumbItem, Button, Tabs, Tab } from '@carbon/react'; Before we can render the tabs, we need to add some props for the component after the import. These example props came from the -[React Tabs Story](http://react.carbondesignsystem.com/?selectedKind=Tabs) in -Storybook. +[React Tabs Story](https://react.carbondesignsystem.com/?path=/story/components-tabs--default) +in Storybook. ```javascript path=src/content/LandingPage/LandingPage.js const props = { @@ -319,8 +319,8 @@ the expected `grid` > `row` > `col` DOM structure. -Hold up! If you were to run -[DAP](https://www.ibm.com/able/dynamic-assessment-plug-in.html) to check for +Hold up! If you were to run the +[Equal Access Toolkit](https://www.ibm.com/able/toolkit) to check for accessibility violations, you'd see `Multiple navigation landmarks must have unique labels specified with aria-label or aria-labelledby` because both the `Breadcrumb` and `Tabs` components use `