diff --git a/src/elements/alert/docs/component.md b/src/elements/alert/docs/component.md deleted file mode 100644 index cee2a46..0000000 --- a/src/elements/alert/docs/component.md +++ /dev/null @@ -1 +0,0 @@ -Alerts provide immediate feedback to users about their actions or system status. They should be noticeable, labeled clearly, and visually distinct from other user interface elements. The copy in these alerts should be concise and informative. Generally, alerts are placed directly above the section that they apply to. \ No newline at end of file diff --git a/src/elements/alert/docs/index.js b/src/elements/alert/docs/index.js deleted file mode 100644 index 9187db3..0000000 --- a/src/elements/alert/docs/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as component } from "./component.md"; -export { default as variants } from "./variants.md"; diff --git a/src/elements/alert/docs/variants.md b/src/elements/alert/docs/variants.md deleted file mode 100644 index d4fdfea..0000000 --- a/src/elements/alert/docs/variants.md +++ /dev/null @@ -1,41 +0,0 @@ -We distinguish four different alert variants: - - -1. **Info (Blue)**
-The info alert is used to: - - inform users about a (changed) system state, an experience, or feature - - give users an update on any ongoing process - - provide users with information that does not require any immediate action
- -The info alert should be easily noticeable but not intrusive, and should not block any user actions. - -> Example copy: *Our app will be undergoing maintenance on Friday, March 31st from 8 PM to 10 PM EST.* - -2. **Warning (Yellow)**
-The warning alert is used to: - - alert users about potential problems or issues that may arise if they proceed with a particular action - - notify users of a potential security risk, or any other situation that requires attention and/or an action - - notify users of a condition that might cause a problem in the future - -The warning alert, different from an error alert, appears **before** someone takes an action to indicate a significant change or potential loss of data. - -> Example copy: *Proceeding with this action will permanently delete all data associated with your account. Are you sure you want to continue?* - -3. **Success (Green)**
-The success alert is used to: - - confirm that a particular action, task, or process has been completed successfully - - provide users with positive feedback - -The success alert can be used to inform users that their action has been processed, a payment has been made, or any other successful completion of a process. - -> Example copy: *Your payment has been received. Thank you for your purchase!* - -4. **Error (Red)**
-The error alert is used to: - - indicate that an error occurs or has occurred (often while performing a particular action) - - provide users with information about why the error occurred, what went wrong and how to fix it (or at least move forward) - - inform users about critical issues that negatively affect the functionality of the app - -An error alert, different from a warning alert, appears **after** someone has taken an action. The error alert can be used to alert users that their input is invalid, a process has failed, an action cannot be completed, or any other situation that requires immediate attention. Error messages should be concise and avoid irrelevant details. - -> Example copy: *There was an error processing your payment. Please check your payment information and try again.* diff --git a/src/elements/badge/docs/component.md b/src/elements/badge/docs/component.md deleted file mode 100644 index 91d2267..0000000 --- a/src/elements/badge/docs/component.md +++ /dev/null @@ -1 +0,0 @@ -Badges are visual elements that convey information to users in a subtle way, often used to draw attention to certain elements such as new, beta, free or premium features. \ No newline at end of file diff --git a/src/elements/badge/docs/index.js b/src/elements/badge/docs/index.js deleted file mode 100644 index a53b744..0000000 --- a/src/elements/badge/docs/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { default as component } from "./component.md"; -export { default as sizes } from "./sizes.md"; -export { default as variants } from "./variants.md"; diff --git a/src/elements/badge/docs/sizes.md b/src/elements/badge/docs/sizes.md deleted file mode 100644 index 7c21037..0000000 --- a/src/elements/badge/docs/sizes.md +++ /dev/null @@ -1,12 +0,0 @@ -The aforementioned badge variants can be used in three different sizes: - -1. **Large**
-The large badge size is used in combination with a section heading. For reference, in our interfaces, the font-size of a heading is 1 rem. - -2. **Default**
-The default badge size is typically used in the top right corner of a card or in combination with a setting label (e.g. a label from a toggle or an input field). In our interfaces, the font-size of a setting label is 0.8125 rem. - -3. **Small**
-The small badge size is typically used in combination with small labels or in smaller spaces, such as sidebar menus. - -_**Note:** When choosing a badge size for a particular situation other than those previously mentioned, it's important to consider the context, hierarchy, proximity, screen size and resolution. The goal should be to choose a size that is appropriate for the information being conveyed, while also maintaining visual balance in the user interface._ \ No newline at end of file diff --git a/src/elements/badge/docs/variants.md b/src/elements/badge/docs/variants.md deleted file mode 100644 index d9b8671..0000000 --- a/src/elements/badge/docs/variants.md +++ /dev/null @@ -1,12 +0,0 @@ -In our user interfaces, we distinguish three different badge variants: - -1. **Info (Blue)**
-The info badge is used to provide additional information or context about a feature or section. In our interfaces, we use blue `New` or `Beta` badges to indicate that a feature is new or in the beta phase. Additionally, we use `Free` badges to indicate which of our courses are available for free. These badges are often placed directly to the right of a feature or section title, or at the top right corner of a card. - -2. **Upsell (Yellow)**
-The upsell badge is used to show premium users which features are part of their premium or paid plan, and is typically placed directly to the right of a feature or section title. In our interfaces, the label of this badge is always `Premium`. - -3. **Plain (Gray)**
-The plain badge is used to represent a variable, such as in the SEO title or meta description field. - -_**Note:** It is important to use badges sparingly and only when necessary to provide meaningful information to the user. Overuse of badges can lead to clutter and confusion._ \ No newline at end of file diff --git a/src/elements/button/docs/component.md b/src/elements/button/docs/component.md deleted file mode 100644 index 155da17..0000000 --- a/src/elements/button/docs/component.md +++ /dev/null @@ -1 +0,0 @@ -Buttons are essential components in a user interface. They are used to trigger actions and provide users with feedback. A button should immediately trigger an action on a page or screen when clicked or tapped. \ No newline at end of file diff --git a/src/elements/button/docs/index.js b/src/elements/button/docs/index.js deleted file mode 100644 index da90a42..0000000 --- a/src/elements/button/docs/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export { default as component } from "./component.md"; -export { default as sizes } from "./sizes.md"; -export { default as states } from "./states.md"; -export { default as variants } from "./variants.md"; diff --git a/src/elements/button/docs/sizes.md b/src/elements/button/docs/sizes.md deleted file mode 100644 index da690da..0000000 --- a/src/elements/button/docs/sizes.md +++ /dev/null @@ -1,12 +0,0 @@ -The aforementioned button variants can be used in three different sizes: - -1. **Large**
-The large button size is often used ads and upsells that require significant user attention. It can also be useful for touch interfaces, where larger buttons are easier to tap. - -2. **Default**
-The default button size is used for the vast majority of actions in our user interfaces, including actions such as *Insert a variable*, *Select image*, *View XML sitemap*, *Unlock with Premium*, *Save changes*. It is also used in cards and other areas of the user interface where only a few buttons are present on the page. - -3. **Small**
-The small button size is very useful for fitting more actions in a smaller space, like in tables. This approach ensures that the user interface remains tidy and uncluttered. - -_**Note:** When choosing a button size for a particular situation other than those previously mentioned, it's important to consider the context, hierarchy, proximity, screen size and resolution. The goal should be to choose a size that is appropriate for the information being conveyed, while also maintaining visual balance in the user interface._ \ No newline at end of file diff --git a/src/elements/button/docs/states.md b/src/elements/button/docs/states.md deleted file mode 100644 index 1361c8c..0000000 --- a/src/elements/button/docs/states.md +++ /dev/null @@ -1,13 +0,0 @@ -In addition to the default, hover, and focus states, two other button states have been specified: - -1. **Loading state**
-The loading state is used when a button click triggers a process that takes some time to complete, such as running a data optimization or uploading a file. It is important to indicate to the user that an action is happening, and the loading state provides feedback that the system is working. The loading state will be represented by a spinner to indicate to the user that the process is ongoing. - -2. **Disabled state**
-The disabled state, represented by a transparent button, is used when the button cannot be clicked due to a certain condition. The disabled state should be used when the user is not eligible to perform the action due to reasons such as insufficient permissions, lack of connectivity, or a disabled setting. - -
-
- **Note:** The disabled state does not remove pointer-events. If you want to remove pointer-events, do it manually using a `className`. -
-
diff --git a/src/elements/button/docs/variants.md b/src/elements/button/docs/variants.md deleted file mode 100644 index 668092c..0000000 --- a/src/elements/button/docs/variants.md +++ /dev/null @@ -1,24 +0,0 @@ -In our user interfaces, we distinguish four different button variants: - -1. **Primary action (Purple)**
-Purple buttons are used to highlight the most important action or call to action on a page or screen. They should be used for the main action you want your users to take. The purple color is derived from our branding guidelines, which helps them stand out and catch the user's attention. These buttons should be used sparingly to avoid overwhelming users. Ideally, there should only be one primary action button on a page. - -> Example actions: *Save changes*, *Submit*, *Sign up* or *Confirm*. - -2. **Secondary action (White)**
-White buttons are used to offer secondary or supplementary actions to users that are less important than the primary action. These buttons can complement the primary action or provide additional options to users. They have a clean and simple appearance that does not draw too much attention. In interfaces that offer a large number of actions, such as tables, it is recommended to use secondary action buttons or text links to keep the UI clean and uncluttered. - -> Example actions: *Cancel* or *Skip*. - -3. **Danger action (Red)**
-Red buttons are used to warn users of potentially hazardous or irreversible actions. They often alert users to high-risk actions that could have serious consequences if not handled carefully, such as deleting files, canceling subscriptions, or permanently removing data. - -> Example actions: *Deactivate Yoast SEO*, *Cancel subscription*, *Discard changes*, *Delete* or *Permanently remove all data*. - -4. **Buy action (Yellow)**
-Yellow buttons are used to indicate the start of a flow that eventually leads to a purchase or financial transaction related to our own products. Often, these buttons guide users toward a product page, their cart or the checkout process. Their bright color makes them stand out from our brand colors and other interface elements, attracting the user's attention. - -> Example actions: *Unlock with Premium*, *Get Yoast SEO Premium* or *Buy Yoast Local SEO*. - -**Accessibility**
-All button variants have a clear hover and focus state, to help users with motor impairments understand which element they are interacting with. \ No newline at end of file diff --git a/src/elements/checkbox/docs/component.md b/src/elements/checkbox/docs/component.md deleted file mode 100644 index 435591f..0000000 --- a/src/elements/checkbox/docs/component.md +++ /dev/null @@ -1,12 +0,0 @@ -A checkbox is a graphical user interface element that can be used either as a single checkbox or in a list, and its usage can differ depending on the context and user's needs. - -**Single checkbox**
-A single checkbox is typically used for binary choices, such as: - - **enabling** (checked) or **disabling** (unchecked) a setting - - **agreeing** (checked) or **disagreeing** (unchecked) to a statement in the label that is placed directly to the right of the checkbox (e.g. agreeing to terms and conditions). - -It presents the user with a clear and simple choice and allows them to make a single decision. - -**Checkbox list**
-(see `Checkbox group` component)
-A checkbox list allows users to select one or more options from a list of choices, with each option represented by a separate checkbox. This type of checkbox is commonly used in forms, surveys, and other scenarios where the user needs to select one or more items. \ No newline at end of file diff --git a/src/elements/checkbox/docs/disabled.md b/src/elements/checkbox/docs/disabled.md deleted file mode 100644 index 4754d61..0000000 --- a/src/elements/checkbox/docs/disabled.md +++ /dev/null @@ -1 +0,0 @@ -No user interaction, indicated by opacity and cursor. diff --git a/src/elements/checkbox/docs/index.js b/src/elements/checkbox/docs/index.js deleted file mode 100644 index bbc763c..0000000 --- a/src/elements/checkbox/docs/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as component } from "./component.md"; -export { default as disabled } from "./disabled.md"; diff --git a/src/elements/radio/docs/component.md b/src/elements/radio/docs/component.md deleted file mode 100644 index e303dcf..0000000 --- a/src/elements/radio/docs/component.md +++ /dev/null @@ -1,5 +0,0 @@ -Radio buttons are a type of input element that allows users to select only one option from a list of mutually exclusive options. They are commonly used in forms where users need to select one option from a set of options. - -A radio button should always have a clear and concise label next to it, so users can quickly understand what each option represents. The labels should also be phrased consistently, so users can easily compare and contrast the options. - -(also see `Radio group` component) \ No newline at end of file diff --git a/src/elements/radio/docs/dangerous-label.md b/src/elements/radio/docs/dangerous-label.md deleted file mode 100644 index 2b0be66..0000000 --- a/src/elements/radio/docs/dangerous-label.md +++ /dev/null @@ -1 +0,0 @@ -This Radio element has `isLabelDangerousHtml` prop set to true, the bullet is encoded (•). diff --git a/src/elements/radio/docs/index.js b/src/elements/radio/docs/index.js deleted file mode 100644 index dcbf538..0000000 --- a/src/elements/radio/docs/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { default as component } from "./component.md"; -export { default as dangerousLabel } from "./dangerous-label.md"; -export { default as variants } from "./variants.md"; diff --git a/src/elements/radio/docs/variants.md b/src/elements/radio/docs/variants.md deleted file mode 100644 index 3705f8c..0000000 --- a/src/elements/radio/docs/variants.md +++ /dev/null @@ -1 +0,0 @@ -In the `inline-block` variant example, the `screenReaderLabel` prop is used to provide screen readers with a useful label. diff --git a/src/elements/toggle/docs/component.md b/src/elements/toggle/docs/component.md deleted file mode 100644 index f3b58af..0000000 --- a/src/elements/toggle/docs/component.md +++ /dev/null @@ -1,5 +0,0 @@ -A toggle switch allows users to switch between two states (on and off) by clicking or tapping on it. Toggle switches are commonly used in settings or options menus to enable or disable certain features or functions. - -A toggle switch should always have: -- a clear visual indication of its current state. This toggle has a purple background with a purple checkmark icon to indicate the "on" state, and a gray background with a gray cross icon to indicate the "off" state. -- a clear and descriptive label placed to the left of it, to help users understand its purpose and what it controls. If the toggle switch is part of a feature card, we usually place the label `Enable feature` in front of it to indicate its purpose. \ No newline at end of file diff --git a/src/elements/toggle/docs/index.js b/src/elements/toggle/docs/index.js deleted file mode 100644 index a01392a..0000000 --- a/src/elements/toggle/docs/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as component } from "./component.md";