giphy images (carbon-design-system#4000)

* giphy images

* update giphy

* update giphy

---------

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

src/pages/community/patterns/create-flows/index.mdx

@@ -78,14 +78,15 @@ Narrow or Wide tearsheet variations for single or multistep options,
 respectively.
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='dark'>
+
+![Animated inline create example](/images/InlineCreateExample.gif)
+
+![Animated inline create example](/images/inline-create-example.png)
 
-<img
-  src="/images/InlineCreateExample.gif"
-  alt="Animated inline create example"
-  title="Animated inline create example"
-  style={{ padding: '3rem', backgroundColor: '#e0e0e0' }}
-/>
+</GifPlayer>
 
 <Caption>Example of an inline create</Caption> 
 </Column>
@@ -222,6 +223,7 @@ respectively.
 ### Anatomy of a wide tearsheet
 
 <Row>
+
 <Column colLg={8}>
 
 ![Anatomy of a wide tearsheet](images/WideTearsheetAnatomy.jpg)
@@ -274,19 +276,22 @@ respectively.
 
 ![Alternative left panel width of 320px](images/WideTearsheetAlternateWidth.jpg)
 
-<Caption>Alternative left panel width of 320px</Caption>
-
 </Column>
+
 </Row>
 
 ### Behaviors
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![Wide tearsheet animated Create flow](images/WideTearsheetAnimated.gif)
 
-<Caption>Animated illustration of the Create flow in a Wide tearsheet</Caption> 
+![Wide tearsheet animated Create flow](images/WideTearsheet.png)
+
+</GifPlayer>
 </Column>
 </Row>
 
@@ -316,10 +321,16 @@ all options for a particular Create flow if it will enhance the user experience.
    no gradient.
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![Wide tearsheet animated options toggle](images/WideTearsheetShowAllOptionsAnimated.gif)
 
+![Wide tearsheet animated options toggle](images/WideTearsheetShowAll.png)
+
+</GifPlayer>
+
 <Caption>Animated illustration of the "Show all available options" toggle behavior</Caption>
 </Column>
 </Row>

src/pages/components/UI-shell-header/usage.mdx

@@ -245,16 +245,22 @@ of the navigation’s focusable controls. This lets users easily skip the
 navigation region and begin interacting with the page’s main content area.
 
 <Row>
-<Column  colLg={8} colMd={8} colSm={6} >
+
+<Column colLg={8}>
+<GifPlayer color='light'>
 
 ![hint text](images/skip-to-main-content.gif)
 
+![hint text](images/skip-to-main-content.png)
+
+</GifPlayer>
+
 <Caption>
   The "Skip to main content link" is the first focusable element on the Carbon
   website.
 </Caption>
-
 </Column>
+
 </Row>
 
 #### Screen readers

src/pages/components/content-switcher/style.mdx

@@ -76,8 +76,7 @@ Content switcher has three interactive states—**hover**, **focus**, and
 | Selected   | Focus    | Container  | background-color | `$layer-selected-inverse`  |
 |            |          | Label text | text-color       | `$text-inverse`            |
 |            |          | Icon       | svg              | `$text-inverse`            |
-|            |          | Border     | border           | `$focus`                   |
-|            |          | Border     | inset            | `$focus-inset`             |
+|            |          | Border     | inner-border     | `$focus-inset`             |
 |            | Disabled | Container  | background-color | `$layer-selected-disabled` |
 |            |          | Label text | text-color       | `$text-disabled`           |
 |            |          | Icon       | text-color       | `$text-disabled`           |
@@ -153,10 +152,18 @@ text within its content switcher.
 
 <div className="image--fixed">
 
-![Text content switcher structure and spacing measurements](images/content-switcher-style-structure-text.png)
+![Text content switcher structure and spacing measurements](images/content-switcher-style-1.png)
 
 </div>
 
+<Row>
+<Column colLg={8}>
+
+![Example of a content switcher](images/content-switcher-usage-1.png)
+
+</Column>
+</Row>
+
 <Caption>
   Structure and spacing measurements for the text content switcher | px / rem
 </Caption>

src/pages/components/content-switcher/usage.mdx

@@ -10,8 +10,8 @@ import A11yStatus from 'components/A11yStatus';
 
 <PageDescription>
 
-Content switchers allow users to toggle between alternate views of similar or
-related content within the same space on the screen.
+Content switchers allow users to toggle between two or more content sections
+within the same space on the screen.
 
 </PageDescription>
 
@@ -71,16 +71,16 @@ tool may use a content switcher to divide messages into three views such as
 
 ### When not to use
 
-#### Related subpages
+### Distinct content areas
 
-When navigating between different but related content like subpages, use
+When navigating between distinct content areas like subpages, use
 [tabs](/components/tabs/usage) instead of a content switcher. Tabs follow the
 metaphor for sections in a filing cabinet, and two tabs wouldn’t contain the
 same sheet of paper, so the role of tabs in the information hierarchy is to
 separate content.
 
-Content switcher is often used alongside tabs, but it typically serves at a
-lower hierarchy to organize related content within the tab's contents.
+Content switcher is often used with tabs but at a lower hierarchy to sort
+related contents within that tab content.
 
 #### Binary actions
 

src/pages/components/data-table/usage.mdx

@@ -471,10 +471,15 @@ toolbar. By default the search functionality follows the
 should be closed by default, and placed below the table title.
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![data table search](images/datatable_search.gif)
 
+![data table search](images/data-table-usage-search.png)
+
+</GifPlayer>
 </Column>
 </Row>
 

src/pages/components/notification/usage.mdx

@@ -247,10 +247,15 @@ the top of the list, with older notifications being pushed down until they are
 dismissed.
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![Example of toast notification placement](images/05_toast_context_608.gif)
 
+![Example of toast notification placement](/images/notification-usage-toast.png)
+
+</GifPlayer>
 </Column>
 </Row>
 

src/pages/components/progress-bar/usage.mdx

@@ -117,23 +117,35 @@ which a bar is moving along in constant speed, repeating over time.
 | [Indeterminate](/components/progress-bar/usage#indeterminate-progress-bar) | Use indeterminate progress bars where there is unclear information about the progression — they convey that users’ request, action, or data is being processed at the moment without indicating how long the activity will take. |
 
 <Row>
+
 <Column colLg={4}>
+<GifPlayer color='dark'>
 
 ![Determinate progress bars fill from 0 to 100%.](images/progress-bar-usage-2.gif)
 
+![Determinate progress bars fill from 0 to 100%.](images/progress-bar-usage-2.png)
+
+</GifPlayer>
+
 <Caption>
   Determinate progress bars fill from 0 to 100%.
 </Caption>
 </Column>
 
 <Column colLg={4}>
+<GifPlayer color='dark'>
 
 ![Indeterminate progress bars move along a fixed track continually until the process is complete.](images/progress-bar-usage-3.gif)
 
+![Indeterminate progress bars move along a fixed track continually until the process is complete.](images/progress-bar-usage-3.png)
+
+</GifPlayer>
+
 <Caption>
   Indeterminate progress bars move along a fixed track continually until the process is complete.
 </Caption>
 </Column>
+
 </Row>
 
 ## Determinate progress bar

src/pages/components/text-input/usage.mdx

@@ -429,11 +429,17 @@ empty. Error states have three visual indicators to signify invalid content: a
 red border, an error icon indicator, and an error message.
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![Example of an error state being triggered](images/text-input-usage-2.gif)
 
+![Example of an error state being triggered](images/text-input-usage-invalid.png)
+
+</GifPlayer>
 </Column>
+
 </Row>
 
 ### Required versus optional

src/pages/designing/kits/sketch.mdx

@@ -184,9 +184,19 @@ design. It is the geometric foundation of all the visual elements in the IBM
 Design Language, from typography to columns, boxes, icons, and illustrations.
 The grid provides structure and guidance for all creative decision-making.
 
+<Row>
+<Column colLg={8}>
+<GifPlayer color='dark'>
+
 ![2x Grid overview](/images/grid-2.gif)
 
+![2x Grid overview](/images/grid-2.png)
+
+</GifPlayer>
 <Caption>2x Grid overview</Caption>
+</Column>
+
+</Row>
 
 #### Getting started
 

src/pages/migrating/guide/design.mdx

@@ -81,10 +81,15 @@ See Carbon's
 usage guidance for more information.
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![Example of toast notifications stacking.](images/05_toast_context_608.gif)
 
+![Example of toast notifications stacking.](images/05_toast_context_608.png)
+
+</GifPlayer>
 </Column>
 </Row>
 

src/pages/patterns/forms-pattern/index.mdx

@@ -590,9 +590,13 @@ Common user errors include:
 
 <Row>
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![Example of client-side error message](/images/inline-error-message.gif)
 
+![Example of client-side error message](/images/inline-error-message.png)
+
+</GifPlayer>
 </Column>
 </Row>
 
@@ -607,10 +611,15 @@ messaging wherever possible to help users make the fix. Inline error messages
 should disappear when the form criteria is met.
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='light'>
 
 ![Example of server-side](/images/server_side.gif)
 
+![Example of server-side](/images/server-side.png)
+
+</GifPlayer>
 </Column>
 </Row>
 

src/pages/patterns/global-header/index.mdx

@@ -372,15 +372,20 @@ you navigation’s focusable controls. This lets users easily skip the navigatio
 region and begin interacting with the page’s main content area.
 
 <Row>
-<Column  colLg={8} colMd={8} colSm={6} >
+
+<Column colLg={8}>
+<GifPlayer>
 
 ![hint text](images/skip-to-main-content.gif)
 
+![hint text](images/skip-to-main-content.png)
+
+</GifPlayer>
+
 <Caption>
   The "Skip to main content link" is the first focusable element on the Carbon
   website.
 </Caption>
-
 </Column>
 </Row>
 

src/pages/patterns/loading-pattern/index.mdx

@@ -112,11 +112,15 @@ indicates the system is processing the invite request.
 
 <Row>
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![Example of an inline loading indicator](/images/inline-loading-animated.gif)
 
-<Caption>Example of an inline loading indicator</Caption>
+![Example of an inline loading indicator](/images/inline-loading.png)
+
+</GifPlayer>
 
+<Caption>Example of an inline loading indicator</Caption>
 </Column>
 </Row>
 

src/pages/patterns/notification-pattern/index.mdx

@@ -245,12 +245,15 @@ small region of the screen so their messages should not exceed three lines.
   content area.
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![Toast notification in a product](/images/4_toast_736.gif)
 
-<Caption>Low-contrast toast notifications</Caption>
+![Toast notification in a product](/images/4_toast-736.png)
 
+</GifPlayer>
 </Column>
 </Row>
 

src/pages/patterns/overflow-content/index.mdx

@@ -184,11 +184,17 @@ cases where performance is a concern. See the
 [Loading](/components/loading/usage) section for additional details.
 
 <Row>
+
 <Column colLg={8}>
+<GifPlayer color='dark'>
 
 ![Example of a Code Snippet utilizing the “Show more” Button.](images/show-more.gif)
 
-<Caption>Example of the “Show more” button in context.</Caption>
+![Example of a Code Snippet utilizing the “Show more” Button.](images/show-more.png)
+
+</GifPlayer>
 
+<Caption>Example of the “Show more” button in context.</Caption>
 </Column>
+
 </Row>